<template>
  <div class="statisticsFire">
    <div
      class="statistics-left"
      :class="this.leftFold ? 'leftFold' : 'unLeftFold'"
    >
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">矿山类型统计</div>
        <div class="chartBoard">
          <div
            style="
              margin-left: -125px;
              color: rgb(7, 213, 228);
              font-weight: bold;
              margin-top: -30px;
            "
          ></div>
          <div id="leftChart" ref="leftChart" :style="StylePierLeft"></div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">井工煤矿生产状态统计</div>
        <div class="chartBoard">
          <div
            style="
              margin-left: -125px;
              color: rgb(7, 213, 228);
              font-weight: bold;
              margin-top: -30px;
            "
          ></div>
          <div ref="leftChart2" :style="StyleWKK"></div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">尾矿库状态统计</div>
        <div class="chartBoard">
          <div
            style="
              margin-left: -125px;
              color: rgb(7, 213, 228);
              font-weight: bold;
              margin-top: -30px;
            "
          ></div>
          <div ref="leftChart3" :style="StylePierLeft"></div>
        </div>
      </div>
    </div>
    <div
      class="statistics-right"
      :class="this.rightFold ? 'rightFold' : 'unRightFold'"
    >
      <div class="statistics-box">
        <div class="statistics-bg right"></div>
        <div class="statistics-title">矿山标准化等级</div>
        <div class="chartBoard">
          <div ref="rightChart" :style="StylePierRight"></div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">露天煤矿生产状态统计</div>
        <div class="chartBoard">
          <div ref="rightChart2" :style="StyleLT"></div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">尾矿库类型统计</div>
        <div class="chartBoard">
          <div ref="rightChart3" :style="StylePierRight"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { coalStatistics } from "@/api/data/home";

export default {
  name: "StatisticsCoal",
  data() {
    return {
      leftFold: false,
      rightFold: false,
      StylePierLeft: {
        width: "320px",
        height: "200px",
        position: "relative",
        left: "130px",
        top: "66px",
      },
      //尾矿库状态统计
      StyleWKK: {
        width: "320px",
        height: "160px",
        position: "relative",
        left: "182px",
        top: "66px",
      },
      StylePierRight: {
        width: "320px",
        height: "200px",
        position: "relative",
        left: "-11px",
        top: "-51px",
      },
      //露天煤矿生产状态统计
      StyleLT: {
        width: "320px",
        height: "160px",
        position: "relative",
        left: "32px",
        top: "-34px",
      },
      data: {
        jinggongMineTotal: 7,
        coalMineTotal: 8,
        tailingspondTotal: 7,
        jinggongMineExplorationTotal: 4,
        jinggongMineDesignTotal: 1,
        jinggongMineProduceTotal: 2,
        jinggongMineClosedTotal: 0,
        coalMineExplorationTotal: 1,
        coalMineDesignTotal: 1,
        coalMineProduceTotal: 3,
        coalMineClosedTotal: 0,
        tailingspondConstructTotal: 1,
        tailingspondUsedTotal: 2,
        tailingspondClosedTotal: 1,
        tailingspondValleyTotal: 4,
        tailingspondMountainTotal: 0,
        tailingspondFlatTotal: 3,
        tailingspondRiverInterceptionTotal: 0,
        levelOneMineTotal: 1,
        levelTwoMineTotal: 3,
        levelThreeMineTotal: 5,
      },
    };
  },
  methods: {
    async getData() {
      const { data } = await coalStatistics();
      this.data = data;
      if (data) {
        this.drawLeftLine();
        this.drawLeftLine2();
        this.drawLeftLine3();
        this.drawRightLine();
        this.drawRightLine2();
        this.drawRightLine3();
      }
    },
    drawLeftLine() {
      // 基于准备好的dom，初始化echarts实例
      let leftChart = this.$echarts.init(this.$refs.leftChart);
      // 绘制图表
      let option = {
        color: ["#56acff", "#05eeff", "#0079ee"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          extraCssText:
            "width:160px;height:50px;background:rgba(12,78,125,0.7);",
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          left: 245,
          top: 50,
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          pageIconSize: 11, //翻页按钮大小
          pageFormatter: "", //隐藏翻页的数字
          data: ["井天", "露天", "尾矿库"],
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.data && this.data.jinggongMineTotal,
                name: "井天",
              },
              { value: this.data && this.data.coalMineTotal, name: "露天" },
              {
                value: this.data && this.data.tailingspondTotal,
                name: "尾矿库",
              },
            ],
          },
        ],
      };
      leftChart.setOption(option);
      this.chart1 = leftChart;
    },
    drawLeftLine2() {
      // 基于准备好的dom，初始化echarts实例
      let leftChart = this.$echarts.init(this.$refs.leftChart2);
      // 绘制图表
      let option = {
        color: ["rgba(46,171,254,0.5)"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}：{c} ",
          extraCssText:
            "width:150px;height:50px;background:rgba(12,78,125,0.7);",
        },
        grid: {
          left: 30,
          top: "8%",
          right: "3%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false, // 不显示x轴标签
          },
          axisLine: {
            // x轴线的颜色以及宽度
            show: false,
          },
          axisTick: {
            show: false, // x轴刻度线
          },
          splitLine: {
            // x轴网格线
            show: false,
          },
        },

        yAxis: {
          type: "category",
          axisTick: { show: false }, // y轴刻度线
          axisLabel: { color: "#fff" }, // y轴文字的配置
          axisLine: {
            //x轴线的颜色
            show: false,
            lineStyle: { color: "rgba(255,255,255,0.1)" },
          },
          data: ["勘查", "设计", "生产", "闭坑"],
        },

        series: [
          {
            name: "井工煤矿生产状态统计",
            type: "bar",
            symbol: "triangle",
            // itemStyle: {
            //   color: "rgba(46,171,254,0.5)",
            // },
            itemStyle: {
              color: {
                colorStops: [
                  //柱子的渐变色
                  {
                    offset: 0,
                    color: "rgba(46,171,254,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(46,171,254,1)", // 100% 处的颜色
                  },
                ],
                global: false,
              },
            },

            emphasis: {
              // 鼠标悬浮时的高亮样式
              itemStyle: {
                color: "rgba(46,171,254,1)",
              },
            },
            label: {
              normal: {
                show: false,
                position: "inside", //显示在柱子内部
                textStyle: { color: "#fff" },
                // formatter: "{c}人", //单位
              },
            },

            barMaxWidth: 24,
            barMinWidth: 5,
            barWidth: 18,
            nameGap: 5,
            data: [
              this.data.jinggongMineExplorationTotal,
              this.data.jinggongMineDesignTotal,
              this.data.jinggongMineProduceTotal,
              this.data.jinggongMineClosedTotal,
            ],
          },
        ],
      };
      leftChart.setOption(option);
      this.chart2 = leftChart;
    },
    drawLeftLine3() {
      // 基于准备好的dom，初始化echarts实例
      let leftChart = this.$echarts.init(this.$refs.leftChart3);
      // 绘制图表
      let option = {
        color: ["#56acff", "#05eeff", "#0079ee", "#dadde2"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          extraCssText:
            "width:160px;height:50px;background:rgba(12,78,125,0.7);",
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          left: 245,
          top: 50,
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          pageIconSize: 11, //翻页按钮大小
          pageFormatter: "", //隐藏翻页的数字
          // data: ["勘查", "设计", "生产", "闭坑"],
          data: ["建设", "在用", "闭库"],

          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // { value: this.data && this.data.explorationTotal, name: "勘查" },
              // { value: this.data && this.data.designTotal, name: "设计" },
              // { value: this.data && this.data.governanceTotal, name: "生产" },
              // { value: this.data && this.data.governanceTotal, name: "闭坑" },
              {
                value: this.data && this.data.tailingspondConstructTotal,
                name: "建设",
              },
              {
                value: this.data && this.data.tailingspondUsedTotal,
                name: "在用",
              },
              {
                value: this.data && this.data.tailingspondClosedTotal,
                name: "闭库",
              },
            ],
          },
        ],
      };
      leftChart.setOption(option);
      this.chart3 = leftChart;
    },
    drawRightLine() {
      // 基于准备好的dom，初始化echarts实例
      let rightChart = this.$echarts.init(this.$refs.rightChart);
      // 绘制图表
      let option = {
        color: ["#56acff", "#05eeff", "#0079ee"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          extraCssText:
            "width:160px;height:50px;background:rgba(12,78,125,0.7);",
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          left: 245,
          top: 50,
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          pageIconSize: 11, //翻页按钮大小
          pageFormatter: "", //隐藏翻页的数字
          data: ["一级", "二级", "三级"],
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.data && this.data.levelOneMineTotal,
                name: "一级",
              },
              {
                value: this.data && this.data.levelTwoMineTotal,
                name: "二级",
              },
              {
                value: this.data && this.data.levelThreeMineTotal,
                name: "三级",
              },
            ],
          },
        ],
      };
      rightChart.setOption(option);
      this.chart4 = rightChart;
    },
    drawRightLine2() {
      // 基于准备好的dom，初始化echarts实例
      let rightChart = this.$echarts.init(this.$refs.rightChart2);
      // 绘制图表
      let option = {
        color: ["rgba(46,171,254,0.5)"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}：{c} ",
          extraCssText:
            "width:150px;height:50px;background:rgba(12,78,125,0.7);",
        },
        grid: {
          left: 26,
          top: "8%",
          right: "3%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false, // 不显示x轴标签
          },
          axisLine: {
            // x轴线的颜色以及宽度
            show: false,
          },
          axisTick: {
            show: false, // x轴刻度线
          },
          splitLine: {
            // x轴网格线
            show: false,
          },
        },

        yAxis: {
          type: "category",
          axisTick: { show: false }, // y轴刻度线
          axisLabel: { color: "#fff" }, // y轴文字的配置
          axisLine: {
            //x轴线的颜色
            show: false,
            lineStyle: { color: "rgba(255,255,255,0.1)" },
          },

          data: ["勘查", "设计", "生产", "闭坑"],
        },

        series: [
          {
            name: "露天煤矿生产状态统计",
            type: "bar",
            symbol: "triangle",
            // itemStyle: {
            //   color: "rgba(46,171,254,0.5)",
            // },
            itemStyle: {
              color: {
                colorStops: [
                  //柱子的渐变色
                  {
                    offset: 0,
                    color: "rgba(46,171,254,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(46,171,254,1)", // 100% 处的颜色
                  },
                ],
                global: false,
              },
            },

            emphasis: {
              // 鼠标悬浮时的高亮样式
              itemStyle: {
                color: "rgba(46,171,254,1)",
              },
            },
            label: {
              normal: {
                show: false,
                position: "inside", //显示在柱子内部
                textStyle: { color: "#fff" },
                // formatter: "{c}人", //单位
              },
            },
            barWidth: 18,
            barMaxWidth: 24,
            barMinWidth: 5,
            nameGap: 5,
            data: [
              this.data.coalMineExplorationTotal,
              this.data.coalMineDesignTotal,
              this.data.coalMineProduceTotal,
              this.data.coalMineClosedTotal,
            ],
          },
        ],
      };
      rightChart.setOption(option);
      this.chart5 = rightChart;
    },
    drawRightLine3() {
      // 基于准备好的dom，初始化echarts实例
      let rightChart = this.$echarts.init(this.$refs.rightChart3);
      // 绘制图表
      let option = {
        color: ["#56acff", "#05eeff", "#0079ee", "#dadde2"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          extraCssText:
            "width:160px;height:50px;background:rgba(12,78,125,0.7);",
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          left: 245,
          top: 50,
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          pageIconSize: 11, //翻页按钮大小
          pageFormatter: "", //隐藏翻页的数字
          data: ["山谷型", "榜山型", "平底型", "截河型"],
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.data && this.data.tailingspondValleyTotal,
                name: "山谷型",
              },
              {
                value: this.data && this.data.tailingspondMountainTotal,
                name: "榜山型",
              },
              {
                value: this.data && this.data.tailingspondFlatTotal,
                name: "平底型",
              },
              {
                value:
                  this.data && this.data.tailingspondRiverInterceptionTotal,
                name: "截河型",
              },
            ],
          },
        ],
      };
      rightChart.setOption(option);
      this.chart6 = rightChart;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    if(this.chart1) {
      this.chart1.dispose()
      this.$echarts.dispose(this.chart1)
    }
    if(this.chart2) {
      this.chart2.dispose()
      this.$echarts.dispose(this.chart2)
    }
    if(this.chart3) {
      this.chart3.dispose()
      this.$echarts.dispose(this.chart3)
    }
    if(this.chart4) {
      this.chart4.dispose()
      this.$echarts.dispose(this.chart4)
    }
    if(this.chart5) {
      this.chart5.dispose()
      this.$echarts.dispose(this.chart5)
    }
    if(this.chart6) {
      this.chart6.dispose()
      this.$echarts.dispose(this.chart6)
    }
  },
};
</script>

<style lang="scss" scoped>
.statistics-enter-active,
.statistics-leave-active {
  .statistics-left {
    left: -410px !important;
    opacity: 0 !important;
  }
  .statistics-right {
    right: -410px !important;
    opacity: 0 !important;
  }
}
.router-enter-active,
.router-leave-active {
  .statistics-left {
    left: -410px !important;
    opacity: 0 !important;
  }
  .statistics-right {
    right: -410px !important;
    opacity: 0 !important;
  }
}
.statisticsFire {
  // display: flex;
  // position: absolute;
  // height: 64%;
  // width: 100%;
  // border: 1px solid red;
  // left: 0px;
  // top: 160px;

  .statistics-left {
    transition: all 0.3s linear;
    opacity: 1;
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    left: 0;
    width: 380px;
    height: 73%;
    // border: 1px solid #fff;
    top: 160px;
    margin-left: 29px;
    .statistics-box {
      width: 380px;
      height: 210px;
      // border: 1px solid #ccc;

      .statistics-bg {
        position: relative;
        top: -14px;
        width: 380px;
        height: 41px;
        background: url("../../../../assets/img/Home/抬头组件.png") no-repeat;
      }

      .statistics-title {
        position: relative;
        width: 310px;
        height: 31px;
        top: -50px;
        left: 47px;
        font-family: "AlibabaPuHuiTi-2-105-Heavy";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f6f9fe;
        // box-shadow: 0px 2px 8px 0px rgba(5, 28, 55, 0.42);
      }
      .chartBoard {
        color: white;
        justify-content: center;
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        font-size: 20px;
      }
    }
  }
  .statistics-right {
    transition: all 0.3s linear;
    opacity: 1;
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    right: 0;
    width: 380px;
    height: 73%;
    top: 160px;

    margin-right: 29px;
    .statistics-box {
      width: 380px;
      height: 210px;
      // border: 1px solid #ccc;
      .statistics-bg {
        position: relative;
        top: -14px;
        width: 380px;
        height: 41px;
        background: url("../../../../assets/img/Home/抬头组件.png") no-repeat;
      }
      .statistics-title {
        position: relative;
        width: 310px;
        height: 31px;
        top: -50px;
        left: 47px;
        font-family: "AlibabaPuHuiTi-2-105-Heavy";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f6f9fe;
      }
    }
  }

  .leftFold {
    animation: leftMove1 0.2s linear;
    animation-fill-mode: forwards;
  }
  // .unLeftFold {
  //   animation: leftMove2 0.2s linear;
  //   animation-fill-mode: forwards;
  // }

  @keyframes leftMove1 {
    from {
      left: 0%;
    }
    to {
      left: -380px;
    }
  }
  @keyframes leftMove2 {
    from {
      left: -380px;
    }
    to {
      left: 0%;
    }
  }
  .rightFold {
    animation: rightMove1 0.2s linear;
    animation-fill-mode: forwards;
  }
  // .unRightFold {
  //   animation: rightMove2 0.2s linear;
  //   animation-fill-mode: forwards;
  // }

  @keyframes rightMove1 {
    from {
      // right: 0%;
      width: 380px;
    }
    to {
      // right: -380px;
      width: 0;
    }
  }
  @keyframes rightMove2 {
    from {
      // right: -380px;
      width: 0;
    }
    to {
      // right: 0%;
      width: 380px;
    }
  }
}
</style>
